<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="jquery-3.1.1.js"></script>
    <meta name="author" content="ykf">
    <title>轮播图</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        main{
            height: 205px;
            width: 595px;
            margin: 10px auto;
            border: 1px solid #eee;
        }
        .top{
            line-height: 35px;
            height: 35px;
            width: 100%;
            /*background-color: #eee;*/
            background-image: url(img/btn_cartoon.gif);
            background-position: 0 0;
        }
        .top .dongman{
            display: inline-block;
            height: 35px;
            width: 90px;
            background-image: url(img/btn_cartoon.gif);
            background-position: 0 -100px;
        }
        .top .dian{
            display: inline-block;
            height: 35px;
            width: 8px;
            background-image: url(img/btn_cartoon.gif);
            background-position: 0 -305px;
        }
        .top .now{
            display: inline-block;
            height: 35px;
            width: 8px;
            background-image: url(img/btn_cartoon.gif);
            background-position: 0 -205px;
        }
        .top .left{
            display: inline-block;
            height: 35px;
            width: 31px;
            background-image: url(img/btn_cartoon.gif);
            background-position: 0 -395px;
            cursor: pointer;
        }
        .top .right{
            display: inline-block;
            height: 35px;
            width: 30px;
            background-image: url(img/btn_cartoon.gif);
            background-position: -30px -395px;
            margin-left: -5px;
            cursor: pointer;
        }
        .top .gengduo{
            float: right;
            color: #95b3d9;
            font-size: 12px;
        }
        .top .gengduo:hover{
            color: mediumvioletred;
            /*border-bottom: 1px solid mediumvioletred;*/
        }
        .contain{
            width: 100%;
            height: 165px;
            padding-top: 10px;
            padding-bottom: 10px;
            /*position: relative;*/
        }
        .contain ul{
            list-style: none;
            margin-bottom: 10px;
        }
        ul,li{
            margin: 0;
            padding: 0;
            
        }
        ul li{
            position: absolute;
            height: 100%;
            width: 100%;
            display: none;
        }
        ul li.active{
            display: block;
        }
        li a{
            float: left;
            margin: 10px;
            text-decoration: none;
            margin-bottom: 10px;
        }
        li a p{
            line-height: 0.5;
            color: #95b3d9;
            font-size: 12px;
        }
        li a .p1:hover{
            /*display: block;*/
            /*width: 40px;*/
            color: mediumvioletred;
            /*border-bottom: 1px solid mediumvioletred;*/
        }
    </style>
</head>
<body>
    <main>
        <div class="top">
            <span class="dongman"></span>
            <span class="dian now"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="left"></span>
            <span class="right"></span>
            <span class="gengduo">更多>></span>
        </div>
        <div class="contain">
            <ul>
                <li class="active">
                    <a href="">
                        <img src="img/01.jpg" alt="">
                        <p class="p1">海贼王</p>
                        <p>播放：28276</p>
                    </a>
                    <a href="">
                        <img src="img/01.jpg" alt="">
                        <p class="p1">海贼王</p>
                        <p>播放：28276</p>
                    </a>
                    <a href="">
                        <img src="img/01.jpg" alt="">
                        <p class="p1">海贼王</p>
                        <p>播放：28276</p>
                    </a>
                    <a href="">
                        <img src="img/01.jpg" alt="">
                        <p class="p1">海贼王</p>
                        <p>播放：28276</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/02.jpg" alt="">
                        <p class="p1">哆啦A梦</p>
                        <p>播放：33326</p>
                    </a>
                    <a href="">
                        <img src="img/02.jpg" alt="">
                        <p class="p1">哆啦A梦</p>
                        <p>播放：33326</p>
                    </a>
                    <a href="">
                        <img src="img/02.jpg" alt="">
                        <p class="p1">哆啦A梦</p>
                        <p>播放：33326</p>
                    </a>
                    <a href="">
                        <img src="img/02.jpg" alt="">
                        <p class="p1">哆啦A梦</p>
                        <p>播放：33326</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/03.jpg" alt="">
                        <p class="p1">火影忍者</p>
                        <p>播放：28276</p>
                    </a>
                    <a href="">
                        <img src="img/03.jpg" alt="">
                        <p class="p1">火影忍者</p>
                        <p>播放：28276</p>
                    </a>
                    <a href="">
                        <img src="img/03.jpg" alt="">
                        <p class="p1">火影忍者</p>
                        <p>播放：28276</p>
                    </a>
                    <a href="">
                        <img src="img/03.jpg" alt="">
                        <p class="p1">火影忍者</p>
                        <p>播放：28276</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/04.jpg" alt="">
                        <p class="p1">龙珠</p>
                        <p>播放：57865</p>
                    </a>
                    <a href="">
                        <img src="img/04.jpg" alt="">
                        <p class="p1">龙珠</p>
                        <p>播放：57865</p>
                    </a>
                    <a href="">
                        <img src="img/04.jpg" alt="">
                        <p class="p1">龙珠</p>
                        <p>播放：57865</p>
                    </a>
                    <a href="">
                        <img src="img/04.jpg" alt="">
                        <p class="p1">龙珠</p>
                        <p>播放：57865</p>
                    </a>
                </li>
            </ul>
        </div>
    </main>
</body>
<html>
<script>
    var index = 0;
    // var timer = setInterval(rightImg,1000);
    function rightImg(){
        index = (index ==$('.contain ul li').length-1)? 0 : index+1;
        showImg();
    }
    function leftImg(){
        index = (index ==$('.contain ul li').length-1)? 0 : index-1;
        showImg();
    }

    function showImg(){
        $('.contain ul li').eq(index).show().siblings().hide();
        $('.top .dian').eq(index).addClass('now').siblings().removeClass('now');
    }

    $('.top .left').click(function(){
        $
        leftImg();
    });
    $('.top .right').click(function(){
        rightImg();
    });
</script>